<template>
  <div class="Songexpress">
    <div class="main">
      <div style="display:flex;">
        <div style="margin-left:20px;" class="list">
          <span style="margin-right:30px;" :class="list==index?'p':''" v-for="(item,index) in languagesarr" :key="index" @click="getlist(index)">{{item}}</span>
        </div>
        <div class="function">
          <div class="div1">
            <i class="iconfont icon-bofang2" style="margin-right:5px;"></i> <span>播放全部</span>
          </div>
          <div class="div2">
            <i class="iconfont icon-shoucang" style="margin-right:5px;"></i> <span>收藏全部</span>
          </div>
        </div>

      </div>
      <div class="imglist">
        <div class="Pictureelement" v-for="(item,index) in datalist" :key="item.id" :class="index%2==0?'p':''">
          <span style="font-size:12px;color:#3f3f3f;margin-left: 30px;margin-right: 20px;opacity: 0.6;;">0{{index+1}}</span>
          <img :src="item.album.blurPicUrl" alt="#">
          <i style="position:relative;color: red;left: -40px;font-size: 20px;" class="iconfont icon-bofanganniu"></i>
          <span style="margin-left:10px;width: 200px;">{{item.name}}</span>
          <div style="" class="p1">
            <p class="" v-for="(item1,index1) in item.album.artists" :key="index1">{{item1.name}}</p>
          </div>
          <p class="p2">{{item.album.name}}</p>
          <span style="font-size:12px;margin-left:90px;opacity: 0.6;" v-for="(item2,index2) in timearr" :key="index2" v-show="index==index2">{{item2}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Songexpress',
  data() {
    return {
      languagesarr: ['全部', '华语', '欧美', '韩国', '日本'],
      list: 0,
      languages: 0,
      time: [],
      minute: [],
      minute1: [],
      second: [],
      second1: [],
      timearr: []
    }
  },
  computed: {
    ...mapState({
      datalist: state => state.Latestmusic.datalist
    })
  },
  methods: {
    getlist(e) {
      this.list = e
      if (e == 0) {
        this.languages = 0
        this.$store.dispatch('getNewsongexpress', { type: this.languages })
      } else if (e == 1) {
        this.languages = 7
        this.$store.dispatch('getNewsongexpress', { type: this.languages })
      } else if (e == 2) {
        this.languages = 96
        this.$store.dispatch('getNewsongexpress', { type: this.languages })
      } else if (e == 3) {
        this.languages = 16
        this.$store.dispatch('getNewsongexpress', { type: this.languages })
      } else if (e == 4) {
        this.languages = 8
        this.$store.dispatch('getNewsongexpress', { type: this.languages })
      }
    }
  },
  mounted() {
    this.$store.dispatch('getNewsongexpress', { type: this.languages })
  },
  watch: {
    datalist: {
      handler(v, o) {
        this.time = v.map(val => {
          return val.bMusic.playTime
        })
      }
    },
    time: {
      handler(v, o) {
        this.minute = v.map(val => {
          let m = new Date(val)
          return m.getMinutes()
        })
        this.second = v.map(val => {
          let s = new Date(val)
          return s.getSeconds()
        })
      }
    },
    minute: {
      handler(v, o) {
        this.minute1 = v.map(val => {
          if (val < 9) {
            return '0' + val
          } else {
            return val
          }
        })
      }
    },
    second: {
      handler(v, o) {
        this.second1 = v.map(val => {
          if (val < 9) {
            return '0' + val
          } else {
            return val
          }
        })
      }
    },
    second1: {
      handler(v, o) {
        for (let i = 0; i < v.length; i++) {
          this.timearr.push(this.minute1[i] + ':' + this.second1[i])
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.Songexpress {
  .main {
    margin-top: 20px;
    .list {
      span {
        font-size: 14px;
        opacity: 0.6;
      }
      span:hover {
        cursor: pointer;
        opacity: 1;
      }
      .p {
        font-size: 15px;
        opacity: 1;
        font-weight: bold;
      }
    }
    .function {
      display: flex;
      font-size: 12px;
      margin-left: 600px;
      .div1 {
        margin-right: 10px;
        width: 85px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(241, 25, 43);
        border-radius: 20px;
        padding: 5px;
        color: #fff;
      }
      .div1:hover {
        cursor: pointer;
        background-color: rgb(221, 63, 63);
      }
      .div2 {
        width: 85px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #d5d3d3;
        border-radius: 20px;
        padding: 2px;
      }
      .div2:hover {
        cursor: pointer;
        background-color: #d5d3d3;
      }
    }
    .imglist {
      margin-top: 15px;
      .p {
        background-color: rgb(246, 243, 241);
      }
      .Pictureelement {
        width: 1150px;
        border-radius: 2px;
        height: 90px;

        display: flex;
        align-items: center;
        img {
          width: 70px;
          height: 70px;
          border-radius: 5px;
        }
        img:hover {
          cursor: pointer;
        }
        i:hover {
          cursor: pointer;
        }
        .p1 {
          width: 200px;
          margin-left: 250px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          font-size: 13px;
          opacity: 0.6;

          display: flex;
        }
        .p1:hover {
          cursor: pointer;
          opacity: 1;
        }
        .p2 {
          width: 200px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          font-size: 13px;
          opacity: 0.6;
        }
        .p2:hover {
          cursor: pointer;
          opacity: 1;
        }
      }
      .Pictureelement:hover {
        background-color: rgb(237, 233, 233);
      }
    }
  }
}
</style>